---
---
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" sizes="20x20" href="images/icons/favicon.ico">
    <link href="//fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="stylesheets/main.css" media="screen">
    <link rel="stylesheet" href="ism/css/my-slider.css" media="screen">
    <link rel="stylesheet" href="stylesheets/popup.css">
    <link rel="stylesheet" href="stylesheets/contributors.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <title>Google Code-In with FOSSASIA 2016/17</title>
</head>
<body>

<!-- Navigation Bar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
            data-toggle="collapse" data-target="#collapse"
            aria-expanded="false">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="https://fossasia.org">
            <img src="./images/fossasia-dark.png">
          </a>
        </div>
        <a href="https://codein.withgoogle.com" class="code-in" target="_blank" alt="google-code-in-logo">
            <img src="./images/gci-logo.png" align="right">
        </a>
       <div class="collapse navbar-collapse" id="collapse">
          <ul class="nav navbar-nav" id="menu">
            <li><a class="menu-item" href="#welcome">Welcome</a></li>
            <li><a class="menu-item" href="#mentors">Mentors</a></li>
            <li><a class="menu-item" href="#students">Students</a></li>
            <li><a class="menu-item" href="#blogs">Blog Posts</a></li>
            <li class="dropdown">
              <a class="menu-item" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#stprojects">Student Showcases</a></li>
                <li><a href="#loklak">Loklak</a></li>
                <li><a href="#designs">MBDyn Logo Designs</a></li>
                <li><a href="#issues">Latest Issues</a></li>
              </ul>
            </li>
            <li><a class="menu-item" href="#map">Map</a></li>
            <li class="dropdown">
              <a class="menu-item" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Student Contests  <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="//codeheat.org">Codeheat</a></li>
                <li><a href="//gci19.fossasia.org">Code-In 2019</a></li>
                <li><a href="//gci18.fossasia.org">Code-In 2018</a></li>
                <li><a href="//gci17.fossasia.org">Code-In 2017</a></li>
                <li><a href="//gci16.fossasia.org">Code-In 2016</a></li>
                <li><a href="//gci15.fossasia.org">Code-In 2015</a></li>
                <li><a href="//gci14.fossasia.org">Code-In 2014</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
<!-- End of Navigation Bar -->

<!-- Slider -->
    <div class="slider-container" id="welcome">
      <!-- Start ignoring LineLengthBear -->
      <a href="//github.com/fossasia/gci16.fossasia.org" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 50px; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
      <!-- Stop ignoring LineLengthBear -->
      <div class="ism-slider" data-play_type="loop" data-image_fx="zoompan" data-transition_type="fade" id="my-slider">
        <ol>
          {% for slide in site.data.slides %}
          <li>
            <img src="images/{{slide.img}}">
            <div class="ism-caption ism-caption-0">{{slide.caption}}</div>
            <div class="ism-caption ism-caption-1" data-delay="0">
                {{slide.exp-1}}<br>
                {{slide.exp-2}}<br>
                {{slide.exp-3}}
                {% if slide.action %}
                    <a href="{{slide.actionURL}}">{{slide.action}}</a>
                {% endif %}
            </div>
          </li>
          {% endfor %}
        </ol>
      </div>
    </div>
<!-- End of Slider -->

<!-- Placeholder -->
<section>
    <div class="container">
        <div class="row stats">
            <div class="col-sm-4">
                <a href="#students"><h2 class="number">700+ students</h2 class="number" ></a>
                <p>
                    More than 350 successfully completed tasks in Google Code-In with FOSSASIA in 2016.
                </p>
            </div>
            <div class="col-sm-4">
                <a href="https://codein.withgoogle.com/archive/2016/organization/5747272637743104/"><h2 class="number">1500+ Tasks</h2></a>
                <p>
                    1549 tasks were completed this year, from solving issues, to building web apps, setting up applications and creating blog posts.
                </p>
            </div>
            <div class="col-sm-4">
                <a href="#mentors"><h2 class="number">40 mentors</h2></a>
                <p>
                    Mentors are developers, engineers, university students, professors, and generally contributors who love to share and be a part of our open source community. They help creating better software for a better and just world.


                </p>
            </div>
        </div>

    </div>
</section>

<!-- Main Content -->
    <section class="main-content">
        <div class="container">
            <div id="map"></div>
        </div>
            <!-- Student Projects Section -->
            <section class="projects-sec" id="stprojects" href="#stprojects">
                <!-- Start ignoring BootLintBear -->
                <div class="row projects-wrapper">
                    <div class="container">
                <!-- Stop ignoring -->
                        <!-- Start ignoring BootLintBear -->
                        <h2>STUDENT PROJECTS</h2>
                        <!-- Stop ignoring -->
                        {% for project in site.data.projects %}
                        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                            <div class="card">
                                <div class="avatar">
                                    {% if project.image %}
                                    <img src="images/projects/{{project.image}}"
                                    alt="{{project.name}}"
                                    width="200px" height="200px">
                                    {% else %}
                                    <img src="images/projects/default.png"
                                    alt="{{project.name}}"
                                    width="200px" height="200px">
                                    {% endif %}
                                    <div class="links">
                                        <a href="{{project.link}}" target="_blank">
                                            <i class="fa fa-link"></i>
                                        </a>
                                        <a href="{{project.source}}" target="_blank">
                                            <i class="fa fa-code"></i>
                                        </a>
                                    </div>
                                    <p style="padding-top:3px;width:200px;display:inline-block;margin-top:9px;">
                                        <i class="fa fa-code"></i>
                                        &nbsp;
                                        <span title="{{project.name}} by {{project.owner}}" class="stu-name card-text">
                                            {{project.name}} by {{project.owner}}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </section>
            <!-- End of Student Projects Section -->
            <!-- Stop ignoring -->
        <div class="container">
            <!-- Loklak API -->
            <section class="latest-issues" id="loklak" href="#loklak">
                <!-- Start ignoring BootLintBear -->
                <div class="row">
                    <h2>Loklak API Tweets</h2>
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <div class="twitter-feed">
                            <i class="icon social-twitter text-white"></i>
                            <div class="tweets-feed panel" id="tweets" data-count="50" data-query="fossasia #gci">
                                <div class="arrow-up"></div>
                                <p id="tweet" class="tweet">
                                    Loading...
                                </p>
                                <div class="panel-footer">
                                  <span id="tweet-info">Fetching tweets...</span>
                                </div>
                            </div>
                            <button type="button" class="btn" id="previous"onclick="lastTweet()">
                                ← &nbsp; Previous Tweet!
                            </button>
                            <button type="button" class="btn" id="next"onclick="nextTweet()">
                                Next Tweet! &nbsp; →
                            </button>
                        </div>
                    </div>
                </div>
                <!-- Stop ignoring -->
            </section>
            <!-- End of Loklak API -->
            <!-- Mentors Section -->
            <section class="mentors" id="mentors" href="#mentors">
                <div class="row mentors-wrapper">
                    <!-- Start ignoring BootLintBear -->
                    <h2>MENTORS</h2>
                    <!-- Stop ignoring -->
                    {% for mentor in site.data.mentors %}
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                        <div class="card">
                            <div class="avatar">
                                {% if mentor.image %}
                                <img src="images/mentors/{{mentor.image}}" alt="{{ mentor.name }}">
                                {% else %}
                                <img src="images/mentors/member.png" alt="{{ mentor.name }}">
                                {% endif %}
                                <div class="social">
                                    Show more<br>
                                    information
                                </div>
                                <p style="display: inline-block;">{{mentor.name}}</p>
                            </div>
                        </div>
                        {% include popup.html person=mentor who='mentor' %}
                    </div>
                    {% endfor %}
                </div>
            </section>
        </div>
            <!-- End of Mentor Section -->
        <div class="container-fluid contribthank">
            <div id="contributors-thanks" href="#contributors">
                <div id="contributors-thanks-list" class="row">
                    <div class="col-xs-12">
                        <div class="content">
                            <div class="visible">
                                <p id="name">
                                    Thanks for your contributions, everyone!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


            <!-- Contributor Section -->
            <section id="contributors" class="contributors-sec">
                <div id="contributors-list">
                    <div class="container">
                        <div id="contributors-content">
                            <!-- Start ignoring BootLintBear -->
                            <h2>CONTRIBUTORS</h2>
                            <!-- Stop ignoring BootLintBear -->
                        </div>
                    </div>
                </div>
            </section>
            <!-- End of Contributor Section -->

        <div class="container">
            <!-- Student Section -->
            <section class="students-sec" id="students" href="#students">
                <div class="row students-wrapper">
                    <!-- Start ignoring BootLintBear -->
                    <h2>STUDENTS</h2>
                    <!-- Stop ignoring -->
                    {% for student in site.data.students %}
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                        <div class="card stu-card">
                            <div class="avatar">
                                {% if student.image %}
                                <img src="images/students/{{student.image}}" alt="{{student.name}}">
                                {% else %}
                                <img src="images/mentors/member.png" alt="{{student.name}}">
                                {% endif %}
                                <div class="social">
                                    Show more<br>information
                                </div>
                                <span class="stu-name card-text" title="{{student.name}}">
                                    {{student.name}}
                                </span>
                            </div>
                        </div>
                        {% include popup.html person=student who='student' %}
                    </div>
                    {% endfor %}
                </div>
            </section>
        </div>
            <!-- End of Student Section -->
            <!-- Projects (including student projects, blog, logo, issues, loklak) -->
            <div id="projects" href="#projects">

        <div class="container">
            <!-- Blog Posts Section -->
            <section id="blogs" href="#blogs" class="blogs-sec">
                <div class="row blogs-wrapper">
                    <!-- Start ignoring BootLintBear -->
                    <h2>BLOG POSTS</h2>
                    <!-- Stop ignoring -->
                <!-- Start ignoring LineLengthBear, HTMLLintBear -->
                    {% for blog in site.data.blogs %}
                    <div class="blog-holder col-xs-24 col-sm-12 col-md-6 col-lg-4">
                        <div class="card">
                            <div class="avatar">
                                {% if blog.blog_img %}
                                <a href="{{blog.article_link}}">
                                    <div class="img" style="background-image:url(images/blogs/{{blog.blog_img}});"></div>
                                </a>
                                {% else %}
                                <a href="#">
                                    <div class="img" style="background-image:url(images/blogs/default.jpg);"></div>
                                </a>
                                {% endif %}
                                <p>
                                    Blog of <a href="{{blog.article_link}}">{{blog.name}}</a><br />
                                    {% if blog.article %}{{blog.article}}{% endif %}
                                </p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <!-- Stop ignoring -->
                </div>
            </section>
            <!-- End of Blog Posts Section -->

            <!-- Designs Section -->
            <section id="designs" href="#designs" class="designs-sec">
                <!-- Start ignoring SpaceConsistencyBear -->
                <div class="row designs-wrapper">
                    <!-- Start ignoring BootLintBear -->
                    <h2>MBDyn Logo Designs</h2>
                    <!-- Stop ignoring -->
                    {% for logo in site.data.logos %}
                    <div class="col-xs-6 col-sm-3">
                        <div class="grid">
                            <figure class="effect-gcihover">
                              <!-- Ignore HTMLLintBear -->
                                <img src="images/logos/{{logo.img}}" width="200px" height="200px" alt="By {{logo.author}}">
                                <figcaption>
                                    <p>
                                        <span style="color: #000000">by {{logo.author}}</span>
                                    </p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    {% endfor %}
                    {% for logo in site.data.logosv2 %}
                    <div class="col-xs-6 col-sm-3">
                        <div class="grid">
                            <figure class="effect-gcihover">
                              <!-- Ignore HTMLLintBear -->
                                <img src="images/logos/v2/{{logo.img}}" width="200px" height="200px" alt="By {{logo.author}}" style="border:0;">
                                <figcaption>
                                    <p>
                                        <span style="color: #000000">Version 2</span>
                                        <span style="color: #000000">by {{logo.author}}</span>
                                    </p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    {% endfor %}
                 </div>
                <!-- Stop ignoring -->

            </section>
            <!-- End of Designs Section -->

        </div> <!-- End of .container inside the main-wrapper section -->

                       <!-- Latest Issues Section -->
            <section class="latest-issues" id="issues">
                <div class="issues-wrapper">
                    <!-- Start ignoring BootLintBear -->
                    <h2>LATEST ISSUES</h2>
                    <!-- Stop ignoring -->
                    <div id="issues-categories-wrapper">
                        <div class="issues-category" id="unlabeled-category">
                            <div class="button"><a href="//github.com/fossasia/gci16.fossasia.org/issues?q=is%3Aopen+is%3Aissue+no%3Alabel">Unlabeled</a></div>
                        </div>
                        <!-- <div class="button">
                            <a href="//github.com/fossasia/gci16.fossasia.org/issues">
                                See all issues on&nbsp;<i class="fa fa-github"></i>github
                            </a>
                        </div> -->
                    </div>
                    <a class="btn btn-success btn-lg"
                    style="margin-left: 40%; color: #fff;"
                    href="//github.com/fossasia/gci16.fossasia.org/issues">
                        See all issues on &nbsp;<i class="fa fa-github"></i>
                    </a>
                </div>
            </section>
            <!-- End of Latest Issues Section -->

            </div>
            <!-- End of Projects (including student projects, blog, logo, issues, loklak) -->


        <!--Starting of the FOSSASIA on Social Media-->
        <section class="social-media" id="social-media" href="#social-media">
          <div class="container-fluid">
            <!-- Start ignoring BootLintBear -->
            <div class="row">
                <h2 class="white-header">FOSSASIA on social media</h2>
            </div>
            <!-- Stop ignoring -->
            <!-- Start ignoring BootLintBear -->
            <div class="row">
                  <div class="col-md-4 col-sm-6">
                    <div class="social-page">
                        <a class="twitter-timeline" data-width="400" data-height="400" data-link-color="#E81C4F" href="//twitter.com/fossasia">Tweets by fossasia</a>
                        <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                  </div>

            <div class="col-md-4 col-sm-6">
            <div class="social-page">
                <script src="//apis.google.com/js/platform.js" async defer></script>
                <div class="g-page" data-href="//plus.google.com/108920596016838318216" data-rel="publisher"></div>
            </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="social-page">
                <div id="fb-root"></div>
                    <iframe src="//www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffossasia&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="400"></iframe>
                </div>
            </div>
            </div>
        </div> <!--Fluid-Container-->
            <!-- Stop ignoring -->
            <div class="last-one">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <!-- Ignore LineLengthBear, BootLintBear -->
                            <a data-flickr-embed="true" data-context="true" href="//www.flickr.com/photos/fossasia/30907152523/" title="IMG_20161207_164809">
                            <img src="//c1.staticflickr.com/1/350/30907152523_ab6bf453f4_z.jpg" width="400" height="250" alt="IMG_20161207_164809">
                            </a>
                            <script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
                            <!-- Stop ignoring -->
                        </div>
                         <div class="col-md-4 col-sm-6">
                            <div class="social-page">
                                <iframe width="500" height="200" src="//www.youtube.com/embed/qJ4VdWxoNlI" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div> <!--Last One-->
            </div> <!--Social Media-->
    </section>
 <!--End of Social Media section-->
<!-- End of Main Content -->

<!-- Footer -->
    <section class="footer container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-2 social" style="width:20%">
                <h2>Social Media</h2>
                <a href="//facebook.com/fossasia" target="_blank">
                    <i class="fa fa-facebook" style="margin-left: 14px;"></i>
                </a>
                <a href="//twitter.com/fossasia" target="_blank">
                    <i class="fa fa-twitter"></i>
                </a>
                <a href="//plus.google.com/108920596016838318216" target="_blank">
                    <i class="fa fa-google-plus"></i>
                </a>
                <a href="//www.linkedin.com/groups/FOSSASIA-3762811" target="_blank">
                    <i class="fa fa-linkedin"></i>
                </a>
                <br>
                <a href="//github.com/fossasia" target="_blank">
                    <i class="fa fa-github"></i>
                </a>
                <a href="//flickr.com/photos/fossasia" target="_blank">
                    <i class="fa fa-flickr"></i>
                </a>
                <a href="//www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank">
                    <i class="fa fa-youtube"></i>
                </a>
                <a href="//en.wikipedia.org/wiki/FOSSASIA" target="_blank">
                    <i class="fa fa-wikipedia-w"></i>
                </a>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-7">
                <h2>About FOSSASIA</h2>
                <p class="desc">FOSSASIA is an open source technology organization in Asia that aims to
                bring together an inspiring community across borders and ages to form a better
                future with Open Technologies and ICT.
                </p>
                <p>FOSSASIA is involved in Google Code-In, which serves as a great introduction
                to the world of open source collaboration and an excellent mediator to involve
                the next generation of digital collaborators.
                </p>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2" style="width:21%">
                <h2>FOSSASIA Links</h2>
                <ul style="list-style-type:none">
                    <li><a href="//fossasia.org"><i class="fa fa-globe"></i>Main site</a></li>
                    <li><a href="//blog.fossasia.org"><i class="fa fa-link"></i>Blog</a></li>
                    <li><a href="//codein.withgoogle.com/organizations/fossasia/">
                            <i class="fa fa-google"></i>Google Code-In Page
                        </a>
                    </li>
                    <li><a href="//events.fossasia.org"><i class="fa fa-calendar-o"></i>Events</a></li>
                    <li><a href="//2016.fossasia.org">
                            <i class="fa fa-link"></i>FOSSASIA 2016
                        </a>
                    </li>
                    <li><a href="#"><i class="fa fa-arrow-up"></i>Top of the page</a></li>
                </ul>
            </div>
        </div>
        <!-- Start ignoring LineLengthBear, HTMLLintBear -->
        <p class="text-center" style="margin-top:40px">© Copyright 2009-2016 <a href="//fossasia.org">FOSSASIA</a> | Made with
        <i class="fa fa-heart"></i> for Google Code-In 2016</p>
        <!-- Stop ignoring -->
    </section>
<!-- End of Footer -->

<!-- Scripts -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="javascripts/js-yaml.min.js"></script>
    <script src="javascripts/main.js"></script>
    <!-- Start ignoring JSHintBear, LineLengthBear -->
    <script>
        window.initMap = function() {
            var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 2,
                    scrollwheel: false,
                    center: {
                      lat: 0,
                      lng: 0
                    },
                    styles: [{
                      "elementType": "geometry",
                      "stylers": [{
                              "color": "#1d2c4d"
                      }]
            }, {
                    "elementType": "labels.text.fill",
                    "stylers": [{
                        "color": "#8ec3b9"
                    }]
            }, {
                    "elementType": "labels.text.stroke",
                    "stylers": [{
                        "color": "#1a3646"
                    }]
            }, {
                    "featureType": "administrative",
                    "elementType": "geometry",
                    "stylers": [{
                        "visibility": "off"
                    }]
            }, {
                   "featureType": "administrative.country",
                   "elementType": "geometry.stroke",
                   "stylers": [{
                        "color": "#4b6878"
                   }]
            }, {
                   "featureType": "administrative.land_parcel",
                   "stylers": [{
                        "visibility": "off"
                   }]
            }, {
                      "featureType": "administrative.land_parcel",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#64779e"
                      }]
            }, {
                      "featureType": "administrative.neighborhood",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "administrative.province",
                      "elementType": "geometry.stroke",
                      "stylers": [{
                        "color": "#4b6878"
                      }]
            }, {
                      "featureType": "landscape.man_made",
                      "elementType": "geometry.stroke",
                      "stylers": [{
                        "color": "#334e87"
                      }]
            }, {
                      "featureType": "landscape.natural",
                      "elementType": "geometry",
                      "stylers": [{
                        "color": "#023e58"
                      }]
            }, {
                      "featureType": "poi",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "poi",
                      "elementType": "geometry",
                      "stylers": [{
                        "color": "#283d6a"
                      }]
            }, {
                      "featureType": "poi",
                      "elementType": "labels.text",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "poi",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#6f9ba5"
                      }]
            }, {
                     "featureType": "poi",
                     "elementType": "labels.text.stroke",
                     "stylers": [{
                        "color": "#1d2c4d"
              }]
            }, {
                      "featureType": "poi.park",
                      "elementType": "geometry.fill",
                      "stylers": [{
                        "color": "#023e58"
                      }]
            }, {
                      "featureType": "poi.park",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#3C7680"
                      }]
            }, {
                      "featureType": "road",
                      "elementType": "geometry",
                      "stylers": [{
                        "color": "#304a7d"
                      }]
            }, {
                      "featureType": "road",
                      "elementType": "labels",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "road",
                      "elementType": "labels.icon",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "road",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#98a5be"
                      }]
            }, {
                      "featureType": "road",
                      "elementType": "labels.text.stroke",
                      "stylers": [{
                        "color": "#1d2c4d"
                      }]
            }, {
                      "featureType": "road.arterial",
                      "elementType": "labels",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "road.highway",
                      "elementType": "geometry",
                      "stylers": [{
                        "color": "#2c6675"
                      }]
            }, {
                      "featureType": "road.highway",
                      "elementType": "geometry.stroke",
                      "stylers": [{
                        "color": "#255763"
                      }]
            }, {
                      "featureType": "road.highway",
                      "elementType": "labels",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "road.highway",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#b0d5ce"
                      }]
            }, {
                      "featureType": "road.highway",
                      "elementType": "labels.text.stroke",
                      "stylers": [{
                        "color": "#023e58"
                      }]
            }, {
                      "featureType": "road.local",
                      "stylers": [{
                        "visibility": "off"
                    }]
            }, {
                      "featureType": "transit",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "transit",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#98a5be"
                      }]
            }, {
                      "featureType": "transit",
                      "elementType": "labels.text.stroke",
                      "stylers": [{
                        "color": "#1d2c4d"
                      }]
            }, {
                      "featureType": "transit.line",
                      "elementType": "geometry.fill",
                      "stylers": [{
                        "color": "#283d6a"
                      }]
            }, {
                      "featureType": "transit.station",
                      "elementType": "geometry",
                      "stylers": [{
                        "color": "#3a4762"
                      }]
            }, {
                      "featureType": "water",
                      "elementType": "geometry",
                      "stylers": [{
                        "color": "#0e1626"
                      }]
            }, {
                      "featureType": "water",
                      "elementType": "labels.text",
                      "stylers": [{
                        "visibility": "off"
                      }]
            }, {
                      "featureType": "water",
                      "elementType": "labels.text.fill",
                      "stylers": [{
                        "color": "#4e6d70"
                      }]
            }]
      });
      var marker;
      var marker2;
      var infowindow = null;
      {% for mentor in site.data.mentors %}
          {% if mentor.lat %}
              marker = new google.maps.Marker({
                  position: new google.maps.LatLng({{mentor.lat}}, {{mentor.lng}}),
                  label: 'M',
                  map: map
              });

              infowindow = null;
              var content = "<div><img class='img-rounded' src='images/mentors/{{mentor.image}}' width='240' height='240'><br/>{{mentor.name}}<br/></div>";
              google.maps.event.addListener(marker, 'click', (function(marker, content) {
                  return function() {
                      if (infowindow) {
                        infowindow.close();
                      }
                      infowindow = new google.maps.InfoWindow();
                      infowindow.setContent(content);
                      infowindow.open(map, marker);
                  };
              })(marker, content));
          {% endif %}
      {% endfor %}
      {% for student in site.data.students %}
          {% if student.lat %}
              marker2 = new google.maps.Marker({
                  position: new google.maps.LatLng({{student.lat}}, {{student.lng}}),
                  label : 'S',
                  map: map
              });

              infowindow = null;
              var content = "<div><img class='img-rounded' src='images/students/{{student.image}}' width='240' height='240'><br/>{{student.name}}<br/></div>";
              google.maps.event.addListener(marker2, 'click', (function(marker2, content) {
                  return function() {
                      if (infowindow) {
                        infowindow.close();
                      }
                      infowindow = new google.maps.InfoWindow();
                      infowindow.setContent(content);
                      infowindow.open(map, marker2);
                  };
              })(marker2, content));
          {% endif %}
      {% endfor %}
    };
    </script>
    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCrmk_lnhYhLIqEzLAYSSfIyTzEHP0Jssc&callback=initMap" async defer></script>

    <!-- Stop ignoring -->
    <script src="ism/js/ism-2.2.min.js"></script>
    <script src="//use.fontawesome.com/7f8b61349a.js" async></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" async></script>
    <script src="./javascripts/loklak-fetcher.js"></script>
    <script src="./javascripts/tweet.js"></script>
</body>
</html>
